<template>
  <div>
      <div class="contain">
        <div id="chart2" style="width:48%;height:376px"></div>
        <div id="chart1" style="width:48%;height:376px"></div>
      </div>
      
      <div id="chart3" style="width:100%;height:376px"></div>
  </div>
</template>

<script>
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';
import { throttle } from 'echarts';
import Axios from "axios";

export default {

  data(){
    return {
      recordNum:[],
      dataNum:[],
      countList:[],
      countRecord:[]
    }

  },

  created(){
    echarts.use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    BarChart,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer
    ]);
  },
  mounted(){
    this.fetchData();
    this.charts1();
    this.charts2();
    this.charts3();
  },
  methods: {
    charts1() {
      Axios.get("http://localhost:8080/record/num")
      .then((res)=>{
        this.recordNum = res.data.data;
        console.log(this.recordNum);

        var myChart = echarts.init(document.getElementById('chart1'));
        let option = {
          title: {
            text: '报警管理',
            subtext: 'Alarm management',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '50%',
              data: [
                { value: this.recordNum[0], name: '已处理报警数' },
                { value: this.recordNum[1], name: '未处理报警数' },
                { value: this.recordNum[2], name: '已忽略报警数' },
                { value: this.recordNum[3], name: '报警总数'}
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        myChart.setOption(option);
      })      
    },
    charts2(){
      Axios.get("http://localhost:8080/record/api")
      .then((res)=>{
        this.dataNum = res.data.data;
        console.log(this.recordNum);

        var myChart = echarts.init(document.getElementById('chart2'));
        let option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          // color: ['#5470c6', '#ee6666', '#008000'],
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: this.dataNum[0], name: '总设备数' },
                { value: this.dataNum[1], name: '当日上线数' },
                { value: this.dataNum[2], name: '当日下线数' }
              ]
            }
          ]
        };
        myChart.setOption(option);
      })      
    },
    charts3(){
      Axios.get("http://localhost:8080/record/api3")
      .then((res)=>{
        this.countList = res.data.data;

        var myChart = echarts.init(document.getElementById('chart3'));
        let option = {
          title: {
            text: 'Stacked Line'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['每月在线量', '平均轴速','每月报警数']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.countList.map(item =>{
              return Object.keys(item)[0];
            })
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '每月在线量',
              type: 'line',
              stack: 'Total',
              data: this.countList.map(item =>{
                return Object.values(item)[0];
              }),
              smooth: true
            },
            {
              name: '平均轴速',
              type: 'line',
              stack: 'Total',
              data: [2,4,5,6,7,10,6],
              smooth: true
            },
            {
              name: '每月报警数',
              type: 'line',
              stack: 'Total',
              data: this.countRecord.map(item =>{
                return Object.values(item)[0];
              }),
              smooth: true
            }
            
          ]
        };
        myChart.setOption(option);
      })      
    },
    fetchData(){
      Axios.get("http://localhost:8080/record/api2").then((res)=>{
        this.countRecord = res.data.data;
      })
    }

    
    
  }
}
</script>

<style>
.contain{
  display: flex;
  justify-content: space-between; /* 水平方向平分 */
  align-items: center; /* 垂直方向居中 */
  height: 340px;
}
</style>
